<template>
  <view class="container">
    <!-- <screenCosts @listRefresh="getScreenDetail" :pageFrom="'car'"></screenCosts> -->
    <FilterNavbar :searchList="searchList" v-model:queryParam="screenTypes" @confirm="getScreenDetail">
      <template #center>
        <view class="navbar-title"> 费用信息 </view>
      </template>
    </FilterNavbar>
    <view class="fee-info-box">
      <ve-card
        :customContentStyle="{
          padding: '0.1rpx 32rpx 32rpx',
        }"
        :title="`车辆费用单号: ${feeInfo.businesCode || '-'}`"
        type="none"
        fold
        v-model:initFold="initExpand"
      >
        <ve-cell-price label="应付总额" :value="feeInfo.carInPayAmount"></ve-cell-price>
        <ve-cell-price label="已付金额" :value="feeInfo.carPayAmount"></ve-cell-price>
        <ve-cell-price label="剩余应付金额" :value="feeInfo.carPayNotAmount"></ve-cell-price>
        <view class="orther-fee">
          <ve-cell-price label="应收总额" :value="feeInfo.carInFeeAmount"></ve-cell-price>
          <ve-cell-price label="已收金额" :value="feeInfo.carReceivedAmount"></ve-cell-price>
          <ve-cell-price label="剩余应收金额" :value="feeInfo.carReceivedNotAmount"></ve-cell-price>
        </view>
      </ve-card>

      <view class="fee-card-box">
        <view class="fee-card" v-for="(item, index) in feeInfo.carAssetFeeList" :key="item.id">
          <FeeInfoItem :record="item" :index="index" :carId="feeInfo.carId" />
        </view>
      </view>
      <ve-bottom-box size="mini" v-if="mergeComfirmVisible">
        <ve-button type="primary" size="long" @click="next">批量结算</ve-button>
      </ve-bottom-box>
    </view>
  </view>
</template>

<script setup lang="ts">
  import FilterNavbar from '@/components/FilterNavbar'
  import FeeInfoItem from './components/fee-info-item.vue'

  import { ref, reactive, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { getPurchaseFeeDetail } from '@/api/asset/asset-fee'
  import screenCosts from '@/pages/order/components/screenCost.vue'
  import { usePageDict } from '@/hooks/useDict'
  import dayjs from 'dayjs'

  const dict = usePageDict('costInfoDict')

  const initExpand = ref(true)
  const feeInfo = ref<any>({})
  const screenTypes = ref({
    feeType: undefined,
    costType: undefined,
    feeStatus: undefined,
    dueStartDate: undefined,
    dueEndDate: undefined,
  }) //筛选参数
  const next = () => {
    uni.navigateTo({
      url: `/pages/asset/car-manager/merge-confirmation?carId=${feeInfo.value.carId}`,
    })
  }

  const searchList = computed(() => {
    return [
      {
        prop: 'costType',
        label: '收支类型',
        type: 'picker',
        attrs: {
          options: dict.costTypeEnum,
        },
      },
      {
        prop: 'feeStatus',
        label: '费用状态',
        type: 'picker',
        attrs: {
          options: dict.feeStatusEnum,
        },
      },
      {
        prop: ['dueStartDate', 'dueEndDate'],
        label: '应结日期',
        type: 'daterange-picker',
        attrs: {
          mode: 'date',
        },
      },
    ]
  })

  // 获取费用信息
  const getFeeInfo = (carId: number | string) => {
    getPurchaseFeeDetail({
      carId,
      feeCategoryList: [0, 5, 6],
      dueStartDate: screenTypes.value.dueStartDate ? dayjs(screenTypes.value.dueStartDate).format('YYYY-MM-DD 00:00:00') : undefined,
      dueEndDate: screenTypes.value.dueEndDate ? dayjs(screenTypes.value.dueEndDate).format('YYYY-MM-DD 23:59:59') : undefined,
    }).then((res: any) => {
      // console.log(res)
      const result = res.result

      const dataOne: any[] = []

      if (result.carAssetFeeList && result.carAssetFeeList.length) {
        result.carAssetFeeList.forEach((i) => {
          if (
            (!screenTypes.value.feeType || screenTypes.value.feeType == i.feeType) &&
            (!screenTypes.value.costType || screenTypes.value.costType == i.costType) &&
            (!screenTypes.value.feeStatus || screenTypes.value.feeStatus == i.feeStatus)
          ) {
            dataOne.push(i)
          }
        })
      }

      // console.log('dataOne', dataOne)

      // 嵌入展开收起open
      if (dataOne && dataOne.length > 0) {
        dataOne.forEach((item: any) => {
          item.tableOpen = false //控制单个费用 整个表的显示隐藏
          item.open = false //控制1级
          if (item.feeDetailList.length === 0) {
            item.feeDetailList.push(item)
          } else {
            if (item.feeDetailList && item.feeDetailList.length > 0) {
              item.feeDetailList.forEach((el: any) => {
                el.feeName = el.itemName
                el.totalAmount = el.amount
                el.open = false //控制2级
              })
            }
          }
        })
        mergeComfirmVisible.value = dataOne.some((item: any) => {
          return item.feeStatus === 0 || item.feeStatus === 3 || item.feeStatus === 5
        })
      }
      result.carAssetFeeList = dataOne
      feeInfo.value = result
    })
  }

  // 筛选
  const getScreenDetail = () => {
    console.log('screenTypes', screenTypes.value)
    getFeeInfo(feeInfo.value.carId)
  }

  const mergeComfirmVisible = ref(false)
  onLoad((option: any) => {
    if (option.id) {
      getFeeInfo(option.id)
    }
  })

  onShow(() => {
    if (feeInfo.value.carId) {
      getFeeInfo(feeInfo.value.carId)
    }
  })
</script>

<style lang="less" scoped>
  .container {
    height: auto;
    min-height: 100%;
    // padding-top: 86rpx;
  }

  .fee-info-box {
    padding: 24rpx 24rpx;

    .orther-fee {
      padding: 0.1rpx 24rpx;
      background: #f7f8fa;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
  }
  .fee-card {
    background: #ffffff;
    border-radius: 8rpx;
    padding: 32rpx 24rpx;
    margin-bottom: 24rpx;
    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .ve-bottom-box {
    height: 132rpx;
  }
</style>
